<template>
  <e-dropdown trigger="custom" :visible="visible" transfer>
    <Icon type="filter" :class="{on: visible}" @click="toggleDropdown"> </Icon>
    <template #list>
      <e-dropdown-menu>
        <e-dropdown-item v-for="(item,id) in column.filters" :key='id' :selected="selected===item.value" @click="handleSelect(item.value)" :disabled="item.disabled">{{item.label}}</e-dropdown-item>
      </e-dropdown-menu>
    </template>
  </e-dropdown>
</template>

<script setup>
import Icon from '../icon/icon.vue';
import eDropdown from "../dropdown";
import eDropdownItem from "../dropdown-item";
import eDropdownMenu from "../dropdown-menu";
import { ref } from 'vue';

const props = defineProps({
  column: {
    type: Object,
  },
})
const emit = defineEmits(['handleSelect'])

const visible = ref(false)
const selected = ref(null)

const toggleDropdown = () => {
  visible.value = !visible.value
}

const handleSelect = (value) => {
  selected.value = value
  emit('handleSelect', value)
  visible.value = false
}
</script>
